<template>
    <view class="page over-auto-y column">
        <hj-navbar title="发票列表" />
        <HeadTab :status="params.status" @change="tabChange" />
        <!-- 内容区 -->
        <view class="flex-auto w100 over-hide">
            <scroll-view
                :scroll-y="true"
                class="big"
                :refresher-enabled="true"
                :refresher-triggered="triggered"
                @refresherrefresh="onRefresh"
                @scrolltolower="onScrollToLower"
            >
                <hj-loading :show="isInitLoad" v-if="isInitLoad" />
                <hj-no-data v-else-if="!invoiceList.length" tipsText="暂无相关发票数据~" />
                <block v-else>
                    <List :list="invoiceList" />
                    <view
                        class="justify-content align-start"
                        style="height: 60rpx"
                        v-if="invoiceList.length > 0 && loadmoreShow"
                    >
                        <up-loadmore
                            :status="loadingStatus"
                            icon-type="flower"
                            fontSize="26rpx"
                            loadmoreText="上拉加载更多"
                            nomoreText="没有更多了~"
                        />
                    </view>
                </block>
            </scroll-view>
        </view>
        <!-- 底部安全区域 -->
        <hj-safe-footer />
    </view>
</template>

<script setup>
/**
 * @description 发票列表
 * @author yinzhi
 * @date 2025-05
 */
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
import { logger } from '@/utils/log.js'
import HeadTab from './components/HeadTab.vue'
import List from './components/List.vue'
import { getInvoiceListApi } from '@/libs/api/orderApi.js'
defineComponent({
    components: {
        HeadTab,
        List
    }
})
// 下拉刷新参数
const triggered = ref(false)
const _freshing = ref(false)
// 底部加载更多组件参数
const loadmoreShow = ref(false)
const loadingStatus = ref('loadmore') //loadmore nomore
// 分页器参数
const params = ref({
    pageNo: 1,
    pageSize: 10,
    status: null //发票状态 null全部 0开票中 1开票成功 2开票失败
})
// 订单总数
const total = ref(0)
// 是否初始化加载
const isInitLoad = ref(true)
// 列表数据
const invoiceList = ref([])

// tab切换
const tabChange = status => {
    params.value.status = status
    isInitLoad.value = true
    pageInit()
}

// 初始化
const pageInit = () => {
    params.value.pageNo = 1
    invoiceList.value = []
    total.value = 0
    getInvoiceList()
}

// 获取订单列表
const getInvoiceList = async () => {
    try {
        const data = await getInvoiceListApi(params.value)
        invoiceList.value = [...invoiceList.value, ...data.records] || []
        total.value = data.total || 0
        loadmoreShow.value = total.value > 6 ? true : false
        loadingStatus.value = invoiceList.value.length === total.value ? 'nomore' : 'loadmore'
        // 关闭加载动画
        let time = setTimeout(() => {
            isInitLoad.value = false
            clearTimeout(time)
        }, 400)
    } catch (error) {
        loadingStatus.value = invoiceList.value.length === total.value ? 'nomore' : 'loadmore'
        logger.error('[getInvoiceList] 获取发票列表失败:', error)
    }
}

onLoad(() => {
    getInvoiceList()
})

// 每次页面加载
onShow(() => {
    uni.$off('initList')
    uni.$on('initList', data => {
        invoiceList.value = invoiceList.value.map(item => {
            return {
                ...item,
                status: item.orderNo === data.orderNo ? data.status : item.status
            }
        })
    })
})
// 页面卸载
onUnload(() => {
    uni.$off('initList')
})

// 上拉加载更多
const onScrollToLower = () => {
    if (loadingStatus.value !== 'loading' && invoiceList.value.length < total.value) {
        params.value.pageNo += 1
        loadingStatus.value = 'loading'
        getInvoiceList()
    }
}

// 下拉刷新
const onRefresh = async () => {
    // 防止多次刷新
    if (_freshing.value) return
    _freshing.value = true
    triggered.value = true
    params.value.pageNo = 1
    let time = setTimeout(() => {
        getRefresh()
        clearTimeout(time)
    }, 600)
}
// 刷新事件 等所有接口请求 完成后使刷新动画回弹
const getRefresh = () => {
    Promise.all([pageInit()])
        .then(() => {
            triggered.value = false
            _freshing.value = false
        })
        .catch(() => {
            triggered.value = false
            _freshing.value = false
        })
}
</script>

<style scoped lang="scss">
.page {
    background: $uni-bg-color-grey;
}
:deep(.u-loadmore) {
    margin: 0 !important;
}
:deep(.u-count-down__text) {
    color: $uni-color-primary !important;
}
</style>
